<style>
</style>

<template>
  <div class="search-form-con">
    <Row type="flex" justify="space-between" style="margin-bottom: 24px;">
      <Col :span="2">
        <Button icon="plus" type="primary" @click="addBannerModal.show = true">添加滚动图</Button>
      </Col>
      <!--<Form :model="form" inline>-->
        <!--<FormItem>-->
          <!--<Input v-model="form.word" placeholder="请输入关键字" />-->
        <!--</FormItem>-->
      <!--</Form>-->
    </Row>




    <!-- 添加滚动图 -->
    <Modal v-model="addBannerModal.show" width="400" :mask-closable="false">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>添加滚动图</span>
      </p>

      <div>
        <Form :model="addBannerModal.form" label-position="top">
          <!--<FormItem label="* 滚动图名称">-->
            <!--<Input v-model="addBannerModal.form.name" placeholder="请输入滚动图名称"/>-->
          <!--</FormItem>-->
          <FormItem label="* 项目">
            <Select v-model="addBannerModal.form.projectId">
              <Option v-for="projects in projectsList" :key="projects.id" :value="projects.id">{{projects.name}}
              </Option>
            </Select>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="addBannerModal.loading" @click="handleAddBanner(addBannerModal.form)"
                long>
          <span v-if="!addBannerModal.loading">添加滚动图</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'

  export default {
    name: 'BannerViewHeadTool',
    data() {
      return {
        form: {
          mode: 1,
          word: ''
        },
        // 添加滚动图模态框
        addBannerModal: {
          show: false,
          form: {
            projectId: '',
            type: 1
          },
          loading: false
        }
      }
    },
    watch: {
      'form.word': function (curr) {
        this.$emit('on-search-banner', this.form)
      },
    },
    computed: {
      ...mapState('home', {
        projectsList: state => state.banner.projectsList
      })
    },
    methods: {
      ...mapActions('home/banner', [
        'listProjects'
      ]),
      handleAddBanner(form) {
        this.addBannerModal.loading = true;
        this.$emit('on-add-banner', form, (status) => {
          if (status) {
            this.addBannerModal.show = false
            Object.assign(this.$data.addBannerModal.form, this.$options.data().addBannerModal.form)
          }
          this.addBannerModal.loading = false;
        });
      }
    },
    created() {
      console.log(111)
      this.listProjects()
    }
  }
</script>
